// 竖条 彩色条形图
import React, { useState } from "react";
import style from "@/style/component/common/VerticalColorBar.module.scss"
import CustCardHeader from "@/component/custCardHeader";
import { useContext } from "react";

const VerticalColorBar = ({ height, title = "模块标题", data }) => {

    const colors = [
        { color: "rgb(140,95,244)", lable: "生效中", value: "12%" },
        { color: "rgb(0,176,249)", lable: "无效", value: "87%" },
        { color: "rgb(56,232,240)", lable: "过期", value: "75%" },
        { color: "rgb(63,228,152)", lable: "未知", value: "46%" },
        { color: "rgb(255,243,155)", lable: "生效中", value: "12%" },
        { color: "rgb(236,140,86)", lable: "无效", value: "87%" },
        { color: "rgb(233,30,99)", lable: "过期", value: "75%" },
        { color: "#ff9800", lable: "未知", value: "46%" },
        { color: "rgb(140,95,244)", lable: "生效中", value: "12%" },
        { color: "rgb(0,176,249)", lable: "无效", value: "87%" },
        { color: "rgb(56,232,240)", lable: "过期", value: "75%" },
        { color: "rgb(63,228,152)", lable: "未知", value: "46%" },
        { color: "rgb(140,95,244)", lable: "生效中", value: "12%" },
        { color: "rgb(0,176,249)", lable: "无效", value: "87%" },
        { color: "rgb(56,232,240)", lable: "过期", value: "75%" },
        { color: "rgb(63,228,152)", lable: "未知", value: "46%" },
    ]
    return (
        <div className={style.card} style={{ height }}>
            <div className={style.card_center}>
                <CustCardHeader title={title} hideDateBtn={false} btn={["车险", "意外险", "财产险"]} />
                <div className={style.center_info}>
                    {
                        data.map((item, index) => {
                            return (
                                <div className={style.item} key={index}>
                                    <div className={style.item_center}>
                                        <div className={style.item_center_box} style={{ height: item.value, backgroundColor: colors[index].color }}></div>
                                    </div>
                                    <div className={style.item_word}>
                                        <div className={style.item_value}>{item.value}</div>
                                        <div className={style.item_label}>{item.lable}</div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>

            </div>
        </div>
    )
}
export default VerticalColorBar;